<script setup>
import { useRouter } from "vue-router";

defineProps({
	records: {
		type: Object,
		required: true,
	},
});
const router = useRouter();
const toDetail = (id) => {
	router.push({
		path: "/detail",
		query: {
			id,
		},
	});
};
</script>

<template>
	<div v-for="(item, index) in records" :key="index" @click="toDetail(item.id)" class="h-[300px] w-[200px] pr-4 mr-10 cursor-pointer">
		<div class="h-[200px]">
			<el-image :src="item.posterAddress" class="w-[200px] h-[200px]" fit="fill" alt="" />
		</div>
		<div class="">当前评分:{{ item.score ?? "0" }}</div>
		<div class="describe">
			{{ item.name }}
		</div>
	</div>
</template>

<style scoped>
.describe {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 400;
	font-size: 16px;
	font-family: "Microsoft YaHei", serif;
	word-break: break-all;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
</style>
